<template>
	<view style="border: 1px solid #ccc;width: 750px;">
		<Toolbar ref="toolbar" style="border-bottom: 1px solid #ccc"
		 :editor="editor"
		 :defaultConfig="toolbarConfig"
			:mode="mode" />
		<Editor style="height: 500px;"
		 v-model="html" :defaultConfig="editorConfig" :mode="mode"
			@onCreated="onCreated" />
	</view>
</template>

<script>
	
	import "@wangeditor/editor/dist/css/style.css";
	
	import chooseAndUploadImage from '@/js_sdk/tencentcloud-plugin-cos/choose-and-upload-image.js';
	import getFileAccessUrl from '@/js_sdk/tencentcloud-plugin-cos/get-file-access-url.js';
	import {
		Editor,
		Toolbar
	} from '@wangeditor/editor-for-vue'
	
	
	export default {
		name:"editorArticle",
		components: {
			Editor,
			Toolbar
		},
		props:{
		},
		data() {
			return {
				html:'',
				editor: null,
				toolbarConfig: {
		
				},
				editorConfig: {
					placeholder: '请输入内容...'
				},
				mode: 'default', // or 'simple'
			}
	
		},
		methods: {
			async eventHandler(inser) {
				try {
					const key = await chooseAndUploadImage(); // 返回的key即上传到COS的图片文件名（不包含域名部分，一般用来提交给后台接口保存到数据库）
					const url = this.$cdn+key// 返回的url即前面上传到COS的图片的访问地址（包含临时签名）
					console.log(url)
					uni.showToast({
						title: "上传成功",
						duration: 1500,
					})
					inser(url,'aa',url)
				} catch (error) {
					console.log(error);
				}
			},
			getEditor(){
				return this.editor
			},
			onCreated(editor) {
				this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
				console.log(this.editor.getConfig().MENU_CONF["uploadImage"])
				const self = this 
				this.editor.getConfig().MENU_CONF['uploadImage'] = {
		
		
					customBrowseAndUpload(insertFn) {
						console.log(insertFn)
						self.eventHandler(insertFn)
					},
		
					// 自定义上传
					async customUpload(file, insertFn) {
						// file 即选中的文件
						// 自己实现上传，并得到图片 url alt href
						// 最后插入图片
						// insertFn(url, alt, href)
						console.log(file)
					}
				}
		
			},
		},
		mounted() {
		
		},

		beforeDestroy() {
			const editor = this.editor
			if (editor == null) return
			editor.destroy() // 组件销毁时，及时销毁编辑器
		}
		
	}
</script>

<style>

</style>